<template>
	<view class="login" :style="{backgroundColor:PRIMARY_COLOR}">
		<view class="topText">
			Welcome back
		</view>

		<view class="loginBox">
			<text class="loginText">
				Login
			</text>

			<view class="loginForm">
				<view class="emailBox">
					<view class="top">
						<view class="iconBox">
							<image style="height: 100%;width: 100%;"
								src="../../static/icons/Iconly_Light_Message@1x.png" mode=""></image>
						</view>


						<text class="text">
							Email
						</text>
					</view>

					<!-- inputBox -->
					<input type="text" class="input" placeholder="请输入邮箱" />
				</view>


				<view class="passwordBox">
					<view class="top">
						<view class="iconBox">
							<image style="height: 100%;width: 100%;" src="../../static/icons/Iconly_Light_Lock@1x.png"
								mode=""></image>
						</view>


						<text class="text">
							Password
						</text>
					</view>

					<!-- inputBox -->
					<input type="text" class="input" placeholder="请输入密码" :password="notShowPassword">
					<text @click="toggleShowPassword" class="showOrHide" :style="{color:PRIMARY_COLOR}">
						{{notShowPassword ? "Show" :"Hide"}}
					</text>
					</input>


				</view>

				<view class="forget" :style="{color:PRIMARY_COLOR}">
					Forget password
				</view>
			</view>


			<view @click="goHomePage" class="loginButton" :style="{backgroundColor:PRIMARY_COLOR}">
				<text>
					Login
				</text>
			</view>

			<view class="create" :style="{color:PRIMARY_COLOR}">
				Create account
			</view>
		</view>


	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		PRIMARY_COLOR
	} from '../../constants/color';

	// 是否显示密码
	const notShowPassword = ref(true)

	const toggleShowPassword = () => {
		notShowPassword.value = !notShowPassword.value
	}

	// 表单数据
	const loginFormFData = reactive({
		// 邮箱
		email: "",
		// 密码
		password: "",
	})

	// 跳转首页
	const goHomePage = () => {
		uni.redirectTo({
			url: '/pages/home/home'
		})
	}
</script>

<style scoped lang="scss">
	.top {
		display: flex;
		align-items: center;
		justify-content: start;
		gap: 10rpx;

		.iconBox {
			width: 48rpx;
			height: 48rpx;
		}

		.text {
			font-size: 30rpx;
			font-weight: 600;
			letter-spacing: 0px;
			line-height: 35rpx;
			color: rgba(134, 134, 134, 1);
		}
	}

	.input {
		box-sizing: content-box;
		margin-top: 12rpx;
		width: 100%;
		border-bottom: 1px solid rgba(201, 201, 201, 1);
		padding: 10rpx 0;
	}


	.login {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;




		.topText {
			margin-top: 198rpx;
			width: 604rpx;
			text-align: start;
			font-size: 130rpx;
			font-weight: 700;
			letter-spacing: 0px;
			line-height: 126rpx;
			color: rgba(255, 255, 255, 1);
		}

		.loginBox {
			margin-top: 124rpx;
			width: 100vw;
			// height: 1294rpx;
			height: 100%;
			border-top-right-radius: 40rpx;
			border-top-left-radius: 40rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.06);
			padding: 100rpx 72rpx;

			.loginText {
				font-size: 36rpx;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 0px;
			}

			.loginForm {
				width: 100%;
				margin-top: 88rpx;

				input {
					height: fit-content;
				}

				.emailBox {
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: start;


				}

				.passwordBox {
					margin-top: 90rpx;
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: start;
					position: relative;

					.showOrHide {
						position: absolute;
						top: 50%;
						right: 40rpx;

						&:active {
							opacity: 0.8;
							// transition: all 0.3s;
						}
					}
				}

				.forget {
					margin-top: 48rpx;
					font-size: 30rpx;
					font-weight: 600;
					letter-spacing: 0px;
					line-height: 35rpx;

					&:active {
						opacity: 0.8;
					}
				}
			}

			.loginButton {
				margin-top: 124rpx;
				width: 628rpx;
				height: 140rpx;
				border-radius: 20rpx;
				box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					color: white;
					font-size: 40rpx;
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 47rpx;
				}

				&:active {
					opacity: 0.8;
				}
			}

			.create {
				margin-top: 38rpx;
				text-align: center;

				&:active {
					opacity: 0.8;
				}
			}
		}
	}
</style>